<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <script type="text/javascript" src="js/common.js"></script>
    <link href="css/index.css" tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/css/style.css"
          rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-3.2.1.js"
            tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/tab.js"
            tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/js/tab.js"></script>
    <style type="text/css">
        .js-load-more {
            padding: 0 5px;
            width: 120px;
            height: 30px;
            background-color: #00c3ad;
            color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin: 20px auto;
            border: 0 none;
            font-size: 16px;
            display: none; /*默认不显示，ajax调用成功后才决定显示与否*/
        }
    </style>
</head>
<body>
<section class="aui-flexView aui-tab" data-ydui-tab>
    <section class="aui-scrollView">
        <div class="tab-panel">
            <div class="tab-panel-item tab-active">
                <div class="tab-panel-img">
                    <img src="images/ad-001.jpg"
                         tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/ad-001.jpg" alt="">
                    <span class="tab-panel-texts">
                                <h2 class="postion">洛阳 <i class="icon icon-dow"></i></h2>
                                <p>洛阳</p>
                            </span>
                </div>
                <div class="aui-palace b-line">
                    <a href="shoplist" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-001.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-001.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>特惠洗车</h2>
                        </div>
                    </a>
                    <a href="peccancy" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-002.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-002.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>违章查询</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-003.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-003.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>4S店保养</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-004.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-004.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>急速救援</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-005.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-005.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>加油充值</h2>
                        </div>
                    </a>
                    <a href="sellcar" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-006.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-006.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>高价卖车</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-007.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-007.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>特价车险</h2>
                        </div>
                    </a>

                    <a href="service.html" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/icon-tag-007.jpg"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-10-25/termini/images/icon-tag-007.jpg"
                                 alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>全部服务</h2>
                        </div>
                    </a>
                </div>

                <div class="divHeight"></div>

                <div class="aui-borrow-head">
                    <div class="aui-borrow-head-title">
                        <h2>
                            会员福利社 <em>0元免费兑换</em>
                        </h2>
                    </div>
                    <div class="aui-borrow-head-ad">
                        <img src="http://www.17sucai.com/preview/1268063/2018-08-23/find/images/ad-001.png"
                             tppabs="http://www.17sucai.com/preview/1268063/2018-08-23/find/images/ad-001.png" alt="">
                    </div>
                    <div class="aui-borrow-head-ad">
                        <a href="javascript:;" class="aui-borrow-head-item">
                            <img src="http://www.17sucai.com/preview/1268063/2018-08-23/find/images/icon-item-fl.png"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-08-23/find/images/icon-item-fl.png"
                                 alt="">
                        </a>
                        <a href="javascript:;" class="aui-borrow-head-item">
                            <img src="http://www.17sucai.com/preview/1268063/2018-08-23/find/images/icon-item-fr.png"
                                 tppabs="http://www.17sucai.com/preview/1268063/2018-08-23/find/images/icon-item-fr.png"
                                 alt="">
                        </a>
                    </div>
                </div>

                <div class="divHeight"></div>

                <div class="aui-flex b-line">
                    <div class="aui-flex-box">
                        <h2>本地早知道</h2>
                    </div>
                    <div style="display: none;" class="aui-flex-fr" style="color:#08ACee; font-size:0.8rem">更多</div>
                </div>
                <div class="aui-news-box">

                </div>

                <!--加载更多按钮-->
                <div class="js-load-more">加载更多</div>
            </div>

        </div>

    </section>

    <footer class="aui-footer">
        <a href="index" class="aui-tabBar-item aui-tabBar-item-active">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-home"></i>
                    </span>
            <span class="aui-tabBar-item-text">首页</span>
        </a>
        <a href="javascript:;" class="aui-tabBar-item">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-find"></i>
                    </span>
            <span class="aui-tabBar-item-text">行程</span>
        </a>
        <a href="gj" class="aui-tabBar-item ">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-car"></i>
                    </span>
            <span class="aui-tabBar-item-text">管家</span>
        </a>
        <a href="user" class="aui-tabBar-item">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-me"></i>
                    </span>
            <span class="aui-tabBar-item-text">我的</span>
        </a>
    </footer>
</section>

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var newsbox = $(".aui-news-box");

    /*初始化*/
    var counter = 1;
    /*计数器*/
    var pageStart = 0;
    /*offset*/
    var pageSize = 1;
    /*size*/

    /*首次加载*/
    getData(pageStart, pageSize);

    /*监听加载更多*/
    $(document).on('click', '.js-load-more', function () {
        counter++;
        pageStart = counter * pageSize;

        getData(pageStart, pageSize);
    });

    function getData(offset, size) {
        $.ajax({
            type: 'GET',
            url: 'news',
            data: {page: counter, postion: "洛阳"},
            dataType: 'json',
            success: function (reponse) {

                var data = reponse.data;
                var sum = reponse.data.length;

                var result = '';

                /****业务逻辑块：实现拼接html内容并append到页面*********/

                //console.log(offset , size, sum);

                /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
                * 例如分页数是5，只剩2条，则只取2条
                *
                * 实际MySQL查询时不写这个不会有问题
                */
                if (sum - offset < size) {
                    size = sum - offset;
                }

                /*使用for循环模拟SQL里的limit(offset,size)*/
                for (var item in reponse.data) {
                    result += '<a href="' + reponse.data[item].url + '" class="aui-flex "><div class="aui-flex-box"><h3>' + reponse.data[item].title + '</h3><p>' + reponse.data[item].posterScreenName + '</p></div><div class="aui-flex-iphone"><img src="' + reponse.data[item].imageUrls + '" alt=""></div></a>';
                    //alert(data.data[item].content);
                }

                newsbox.before(result);

                /*******************************************/

                /*隐藏more按钮*/
                if ((offset + size) >= sum) {
                    $(".js-load-more").hide();
                } else {
                    $(".js-load-more").show();
                }
            },
            error: function (xhr, type) {
            }
        });
    }
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C93b5178d7a8ebdb830b9b557abce78b"></script>

<script type="text/javascript">
    //位置

    getLocation();

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            alert('浏览器不支持地理定位');
        }
    }

    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                alert("定位失败,用户拒绝请求地理定位");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("定位失败,位置信息不可用");
                break;
            case error.TIMEOUT:
                alert("定位失败,请求获取用户位置超时");
                break;
            case error.UNKNOWN_ERROR:
                alert("定位失败,定位系统失效");
                break;
        }
    }

    function showPosition(position) {
        var lat = position.coords.latitude; //纬度
        var lag = position.coords.longitude; //经度
        alert('纬度:' + lat + ',经度:' + lag);
    }

    function showPosition(position) {

        // 百度地图API功能
        var latlon = position.coords.latitude + ','
            + position.coords.longitude;
        var url = 'http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=' + latlon + '&output=json&pois=0';
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            url: url,
            beforeSend: function () {
                $(".postion").text('正在定位...');
            },
            success: function (json) {
                if (json.status == 0) {
                    $(".postion").text(json.result.sematic_description);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".postion").text("位置获取失败");
            }
        });
    }

</script>
</body>
</html>
